{extend name="main" /}
{block name="body"}
<style>
.store-total-container {
    font-size: 14px;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.store-total-container .store-total-icon {
    top: 45%;
    right: 8%;
    font-size: 65px;
    position: absolute;
    color: rgba(255, 255, 255, 1);
}

.store-total-container .store-total-item {
    color: #fff;
    line-height: 3em;
    padding: 8px 25px;
    position: relative;
}

.store-total-container .store-total-item > div:nth-child(2) {
    font-size: 42px;
    line-height: 42px;
}

</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">接入站点</div>
        <div class="layui-card-body">
            <div class="think-box-shadow store-total-container notselect">
                <div class="layui-row layui-col-space15">
                    {foreach name="web_list" item="vo"}
                    <a href="javascript:;" class="layui-col-sm6 layui-col-md3" style="display: block;">
                        <div class="store-total-item nowrap" style="background:#{:randColor()}">
                            <div>{$vo.typeid|get_site_typename}</div>
                            <div>{$vo.title}</div>
                            <div>{$vo.url}</div>
                        </div>
                        <i class="store-total-icon layui-icon layui-icon-chart-screen"></i>
                    </a>
                    {/foreach}
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">采集统计</div>
                <div class="layui-card-body layui-text">
                    <div id="my_chart1" style="width: 100%;height: 300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">内容统计</div>
                <div class="layui-card-body layui-text">
                    <div id="my_chart2" style="width: 100%;height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">素材统计</div>
                <div class="layui-card-body layui-text">
                    <div id="my_chart3" style="width: 100%;height: 300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">文章段落统计</div>
                <div class="layui-card-body layui-text">
                    <div id="my_chart4" style="width: 100%;height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-header">数据概览</div>
                <div class="layui-card-body layui-text">
                    <div id="my_chart" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">服务器信息</div>
                <div class="layui-card-body layui-text">
                    <table class="layui-table">
                        {foreach name="server_info" item="vo"}
                        {if condition="$k%2==1"}<tr>{/if}
                        <td width="100">{$key}：</td>
                        <td>{$vo}</td>
                        {if condition="$k%2==0"}</tr>{/if}
                        {/foreach}
                        {if condition="count($caches)%2==1"}<td>&nbsp;</td><td>&nbsp;</td></tr>{/if}
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row ">
        <div class="layui-col-md9">

        </div>
    </div>
</div>
{/block}

{block name="js"}
<script src="/static/admin/js/echarts.js"></script>
<script>
    var myChart1 = echarts.init(document.getElementById('my_chart1'));
    option1 = {
        title: {
            text: '采集',
            // subtext: '纯属虚构',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                // name: '访问来源',
                type: 'pie',
                radius: '50%',
                data: [
                    {value: {$grab.init}, name: '原始采集数据({$grab.init})'},
                    {value: {$grab.project}, name: '品牌文章({$grab.project})'},
                    {value: {$grab.type}, name: '行业文章({$grab.type})'},
                    {value: {$grab.unknow}, name: '未识别文章({$grab.unknow})'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart1.setOption(option1);

    var myChart2 = echarts.init(document.getElementById('my_chart2'));
    option2 = {
        title: {
            text: '内容',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: [
                    {value: {$content.project}, name: '项目数据({$content.project})'},
                    {value: {$content.project_shop}, name: '店铺数据({$content.project_shop})'},
                    {value: {$content.company}, name: '公司数据({$content.company})'},
                    {value: {$content.original}, name: '原创文章({$content.original})'},
                    {value: {$content.pseudo}, name: '伪原创文章({$content.pseudo})'},
                    {value: {$content.compose}, name: '组合文章({$content.compose})'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart2.setOption(option2);

    var myChart3 = echarts.init(document.getElementById('my_chart3'));
    option3 = {
        title: {
            text: '素材',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: [
                    {value: {$sucai.chip}, name: '单独素材({$sucai.chip})'},
                    {value: {$sucai.title}, name: '标题素材({$sucai.title})'},
                    {value: {$sucai.start}, name: '资讯首段({$sucai.start})'},
                    {value: {$sucai.end}, name: '资讯尾段({$sucai.end})'},
                    {value: {$sucai.pic_merge}, name: '图片合成({$sucai.pic_merge})'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart3.setOption(option3);

    var myChart4 = echarts.init(document.getElementById('my_chart4'));
    option4 = {
        title: {
            text: '文章段落',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: [
                    {value: {$section[0]}, name: '靠谱({$section[0]})'},
                    {value: {$section[1]}, name: '真假({$section[1]})'},
                    {value: {$section[2]}, name: '骗局({$section[2]})'},
                    {value: {$section[3]}, name: '前景({$section[3]})'},
                    {value: {$section[4]}, name: '生意({$section[4]})'},
                    {value: {$section[5]}, name: '赔/亏({$section[5]})'},
                    {value: {$section[6]}, name: '怎么样({$section[6]})'},
                    {value: {$section[7]}, name: '好不好({$section[7]})'},
                    {value: {$section[8]}, name: '值吗({$section[8]})'},
                    {value: {$section[9]}, name: '赚钱/挣钱({$section[9]})'},
                    {value: {$section[10]}, name: '怎么加盟/如何加盟({$section[10]})'},
                    {value: {$section[11]}, name: '口碑/评价({$section[11]})'},
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart4.setOption(option4);

    var myChart = echarts.init(document.getElementById('my_chart'));
    option = {
        title: {
            text: '堆叠区域图'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '邮件营销',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '联盟广告',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '视频广告',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: '直接访问',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                name: '搜索引擎',
                type: 'line',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                areaStyle: {},
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };
    myChart.setOption(option);
</script>
{/block}